<template>
	<view class="order">
		<view style="width: 750rpx;height: 10rpx;"></view>
		<!-- <view class="order-mation_address">
			<view class="address" @click="diycity">
				<view class="address_left">
					<image class="dingwei" src="https://pd.pdaxiang.com/upload/static/newImg/address.png"></image>
					<view class="address_text">
						<text v-if="cityList == '' || cityList==null">您还没有收货地址，去添加收货地址~</text>
						<text style="color: #999999;font-size: 30rpx;" v-if="cityList">{{ cityList.name }} &nbsp;&nbsp;&nbsp;{{ cityList.mobile }}</text>
						<text style="color: #333333;font-size: 28rpx;" v-if="cityList">
							{{ cityList.province }}{{ cityList.city }}{{ cityList.district }}{{ cityList.detail }}
						</text>
					</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view> -->
		<view class="order-store" v-if="minlist.goods_list">
			<view class="order-store-cent">
				<view class="order-list">
					<view class="order-list-left">
						<image :src="minlist.goods_list.cover_pic" mode="aspectFill"></image>
						<view>
							<view class="ordertext1">{{minlist.goods_list.goods_name}}</view>
							<view class="ordertext2">
								<view class="left">大王币：{{ minlist.goods_list.integral_price }}</view>
								<view class="right">
									<text></text>
									<text>x{{minlist.goods_list.num}}</text>
									<!-- <u-number-box v-model="value" @change="valChange" :min="1" :long-press="false" :disabled-input="true"></u-number-box> -->
								</view>
							</view>
							<view class="order_gige">
								规格：<text v-for="(item,index) in minlist.goods_list.attr_list"
									:key="index">{{item.attr_name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-mationyun" style="margin-bottom: 20rpx;" v-if="minlist.goods_list.freight>0">
			<text>运费</text>
			<text>￥{{ minlist.freight }}</text>
		</view>
		<view class="order-mationyun">
			<text>大王币</text>
			<text>{{ minlist.total_integral }}</text>
		</view>
		<view class="order-mationyun" v-if="goodsData.is==1" @click="goseleCoupon">
			<text>优惠券</text>
			<text v-if="youhuinum==0" style="font-size: 28rpx;">选择优惠券<u-icon name="arrow-right"></u-icon></text>
			<text v-if="youhuinum!=0">-{{youhuinum}}
				<u-icon name="arrow-right"></u-icon>
			</text>
		</view>
		<view class="order-mation3" v-if="goodsData.is==1">
			<view class="om-top"><text>支付方式</text></view>
			<view class="order-con">
				<view @click="zfClick(1)" v-if="walletData.weixin_pay_status=='on'">
					<view>
						<image :src="baseUrl + '/static/user/lchecks.png'" v-if="zfck == 1"></image>
						<image :src="baseUrl + '/static/index/pzselect1.png'" v-else></image>
						<text>微信支付</text>
					</view>

				</view>
				<!-- #ifndef  MP-WEIXIN -->
				<view @click="zfClick(2)" v-if="walletData.alipay_status=='on'">
					<view>
						<image :src="baseUrl + '/static/user/lchecks.png'" v-if="zfck == 2"></image>
						<image :src="baseUrl + '/static/index/pzselect2.png'" v-else></image>
						<text>支付宝支付</text>
					</view>

				</view>
				<!-- #endif -->
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="btns">
			<view class="flex-column">
				<text class="zongjia" style="color: red;"> 剩余：{{walletData.integral}}</text>
				<text class="zongjia">总计: {{pay_integral}}</text>
			</view>
			<view class="odpon allbtn" @click="uploadorder"><text>立即结算</text></view>
		</view>
		<sele-coupon ref="couponref" :couponList="couponList" @goheji="goheji" :youhuiNum="youhuinum"></sele-coupon>
		<u-popup mode="center" v-model="urlpayStatus">
			<view class="webcenter">
				<!-- <web-view  :src="payurl" style="width: 400rpx;height: 400rpx;"></web-view> -->
				结算
			</view>
		</u-popup>
	</view>
</template>

<script>
	import seleCoupon from "@/components/mall/selecoupon.vue"
	export default {
		components: {
			seleCoupon
		},
		data() {
			return {
				payurl: "",
				order_id: "",
				getjieguodingshi: null,
				urlpayStatus: false,
				value: 1,
				minlist: {
					goods_list: {},
					pay_price: 0
				},
				cityList: {},
				remark: '',
				goods_id: '',
				name: "",
				mobile: "",
				page: 1,
				baseUrl: this.$configs.urls,
				zfck: 1,
				ptype: 2, //1微信2支付宝3余额
				goodsData: {
					result: {
						combination: 0
					}
				},
				couponList: [],
				youhuinum: 0,
				walletData: {}, //余额,
				pay_integral: 0,
				total_integral: 0,
			};
		},
		onShow() {

		},
		onLoad(option) {
			////console.log(option,"12321312321313")
			this.goods_id = option.goods_id
			this.goodsData = JSON.parse(option.goodsData)
			this.arrData();
			this.getwallet() //钱包
			// if(this.goodsData.is==2){
			// 	this.ptype = 3
			// 	return
			// }
		},
		methods: {
			getjieguo() {
				let data = {
					order_id: this.order_id
				}
				this.$Request.get(this.$api.index.payResult, data).then(res => {
					if (res.data.is_pay == 1) {
						clearInterval(this.getjieguodingshi)
						this.urlpayStatus = false;
						setTimeout(() => {
							// uni.navigateTo({
							// 	url: '/userPage/user/order/order'
							// })
							uni.switchTab({
								url: '/pages/index/cabinetBox'
							})
						}, 800)
						 clearTimeout();
					}
				});
			},
			getwallet() {
				this.$Request.get(this.$api.user.wallet).then(res => {
					this.walletData = res.data
				});
			},
			goheji(e) {
				this.coupon_id = e.coupon_id
				this.youhuinum = e.youhuinum
				let price = this.minlist.goods_list.price
				////console.log('pay_integral', pay_integral)
				this.pay_integral = parseInt(pay_integral - Number(e.youhuinum))
			},
			goseleCoupon() {
				this.$refs.couponref.open()
				let data = {
					goods_id: this.goods_id,
					combination: this.goodsData.result.combination,
					num: this.goodsData.result.count,
					page: this.page
				};
				this.$Request.get(this.$api.user.goodsCouponList, data).then(res => {
					this.couponList = res.data;
				});
			},
			valChange(e) {
				this.minlist.pay_price = Number(this.minlist.goods.price) * Number(e.value)
			},
			zfClick(infock) {
				if (infock == 1) {
					this.zfck = 1
					this.ptype = 2
				} else if (infock == 2) {
					this.ptype = 1
					this.zfck = 2
				}
			},
			//点确定
			submits() {
				this.show = false;
			},
			arrData() {
				let data = {
					goods_id: this.goods_id,
					combination: this.goodsData.result.combination,
					num: this.goodsData.result.count
				};
				this.$Request.post(this.$api.mall.submitPreview, data).then(res => {
					this.minlist = res.data;
					this.pay_integral = res.data.pay_integral
					this.total_price = res.data.total_price
					this.cityList = res.data.address;
				});
			},
			//提交订单
			uploadorder() {
				let data = {
					goods_id: this.goods_id,
					combination: this.goodsData.result.combination,
					num: this.goodsData.result.count,
					coupon_id: this.coupon_id,
					pay_type: 3
				};
				if (Number(this.walletData.integral) < Number(this.pay_integral)) {
					let heji_num = this.pay_integral - this.walletData.integral
					uni.navigateTo({
						url: "/userPage/user/balance?heji_num=" + heji_num + '&data= ' + JSON.stringify(data)
					})
					return
				}
				this.$Request.post(this.$api.mall.submit, data).then(res => {
					this.subpayData(res.data.order_id)
				});
			},
			subpayData(order_id) {
				let data = {
					order_id: order_id,
					pay_type: this.ptype
				};
				this.$Request.get(this.$api.mall.payData, data).then(res => {
					if (res.data.status == 0) {
						//调用微信或者支付宝
						// this.Payment(res.data.pay_data)
						this.urlpayStatus = true;
						this.payurl = res.data.pay_data
						this.order_id = res.data.order_id
						this.getjieguodingshi = setInterval(() => {
							this.getjieguo()
						}, 3000)
					} else if (res.data.status == 1) {
						//已支付
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/cabinetBox'
							})
						}, 800)
						 clearTimeout();
					}
				});
			},
			Payment(pay_data) {
				let provider = ''
				if (this.ptype == 2) {
					provider = 'wxpay'
				} else {
					provider = 'alipay'
				}
				//调用支付
				uni.requestPayment({
					provider: provider,
					orderInfo: pay_data,
					success() {
						uni.showToast({
							title: "支付成功",
							icon: "none"
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/cabinetBox'
							})
						}, 800)
						 clearTimeout();
					},
					fail(res) {
						////console.log(res);
					}
				});
			},
			//选择收货地址
			diycity() {
				uni.navigateTo({
					url: '/userPage/user/address/address?type=1'
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			shouhuo() {
				uni.navigateTo({
					url: '/pages/live/liveshop/tuikuan'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tuikuan {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background: #FFFFFF;
	}

	.order-mation3 {
		margin: 0 auto;
		margin-top: 20rpx;
		padding-top: 20rpx;
		padding: 20rpx;
		width: 750rpx;
		background: #ffffff;
		.om-top {
			display: flex;
			justify-content: space-between;

			text:nth-of-type(1) {
				font-size: 34rpx;
				color: #333333;
				font-weight: 600;
			}

			text:nth-of-type(2) {
				font-size: 30rpx;
				color: #333333;
			}
		}

		.order-con {
			display: flex;
			flex-direction: column;
			justify-content: center;

			view {
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					margin-top: 28rpx;

					text {
						margin-left: 18rpx;
					}
				}
			}

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.check {
		width: 40rpx;
		height: 40rpx;
	}

	.mode {
		padding: 0 20rpx;
		width: 100%;
		box-shadow: 0 3rpx 6rpx rgba(13, 107, 107, 0.16);
		margin: 0 auto;
		margin-top: 20rpx;
		background: #FFFFFF;

		.txt {
			padding-left: 20rpx;
			font-size: 30rpx;
			color: #000000;
			line-height: 102rpx;
		}

		.wx {
			display: flex;

			.img {
				width: 48rpx;
				height: 48rpx;
				margin-top: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.txt {
				flex: 1;
				font-size: 26rpx;

			}

			.xuanzhong {
				width: 44rpx;
				height: 44rpx;
				margin-top: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.zongjia {
		font-size: 32rpx;
		color: #333333;
		margin-left: 20rpx;
	}

	.odpon {
		width: 370rpx;
		height: 88rpx;
		opacity: 1;
		color: #fff;
		// border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
		background: #485CBC;
		border-radius: 48px;
	}

	.btns {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		width: 750rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #F5F5F5;
	}

	.order {
		min-height: 100vh;
		background-color: #f8f8f8;

		.order-status {
			width: 710rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin: 0 auto;
			margin-top: -65rpx;

			&-top {
				display: flex;
				justify-content: center;
				font-size: 36rpx;
				color: #333;
				padding-top: 23rpx;
			}

			&-cent {
				display: flex;
				justify-content: center;
				font-size: 28rpx;
				color: #999;
				margin-top: 4rpx;
			}

			&-bot {
				margin-top: 18rpx;
				display: flex;
				justify-content: center;
				font-size: 28rpx;
				color: #333;

				text {
					border: 1px solid #707070;
					display: block;
					padding: 2rpx 20rpx;
					border-radius: 100rpx;
					margin: 0 10rpx 30rpx;
				}
			}
		}

		.order-info {
			margin: 0 auto;
			margin-top: 14rpx;
			width: 710rpx;
			background: #ffffff;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;

			view {
				text {
					display: block;

					&:nth-child(1) {
						font-size: 30rpx;
						color: #333333;
					}

					&:nth-child(2) {
						margin-top: 12rpx;
						font-size: 26rpx;
						color: #999;
					}
				}
			}

			image {
				width: 12rpx;
				height: 23rpx;
			}
		}

		.order-store {
			margin: 0 auto;
			margin-top: 20rpx;
			width: 100%;
			background: #ffffff;

			&-top {
				padding: 20rpx 20rpx 0;
				display: flex;
				align-items: center;

				text {
					font-size: 32rpx;
					color: #333;
					display: block;
				}

				image {
					margin-left: 20rpx;
					width: 12rpx;
					height: 23rpx;
					display: block;
				}
			}

			&-cent {
				padding: 20rpx 20rpx 0;
				// border-top: 1px solid #e3e3e3;
				margin-top: 12rpx;

				.order-list {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					color: #333333;

					&-left {
						display: flex;
						align-items: center;

						image {
							width: 202rpx;
							height: 202rpx;
							border-radius: 10rpx;
							margin-right: 10rpx;
						}

						view {
							width: 450rpx;

							.order_gige {
								display: flex;
								align-items: center;
								margin-top: 10rpx;

								text {
									color: #333333;
									font-size: 28rpx;
								}
							}

							.ordertext1 {
								color: #333333;
								font-size: 28rpx;
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
							}

							.guigecss {
								display: flex;
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;

								text {
									color: #333333;
									font-size: 28rpx;
								}
							}

							.ordertext2 {
								width: 100%;
								display: flex;
								justify-content: space-between;
								margin-top: 20rpx;

								.left {
									color: #fb4f40;
									font-size: 32rpx;
								}

								.right {
									width: 40%;
								}
							}

							.ordertext3 {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #999999;
								text-decoration: line-through;
							}
						}
					}

					&-right {
						font-size: 28rpx;
						color: #333;
					}
				}

				.order-num {
					margin: 0 auto;
					width: 618rpx;
					height: 56rpx;
					background: #f8f8f8;
					border-radius: 100rpx;
					font-size: 30rpx;
					color: #999;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 25rpx;
						height: 16rpx;
						margin-left: 20rpx;
					}
				}

				.order-cost {
					display: flex;
					justify-content: space-between;
					font-size: 30rpx;
					color: #333;
					padding: 10rpx 0;
				}
			}

			.order-money {
				padding: 20rpx;
				border-top: 1px solid #e3e3e3;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 28rpx;
				color: #999;

				view {
					&:nth-child(2) {
						font-size: 30rpx;
						color: #333;
						margin-left: 20rpx;
					}
				}
			}
		}

		.order-mationyun {
			margin: 0 auto;
			padding: 20rpx;
			width: 100%;
			background: #ffffff;
			display: flex;
			justify-content: space-between;

			>text {
				font-size: 32rpx;
				color: #333333;
				font-weight: 600;
				padding-right: 40rpx;
			}
		}

		.order-mation_remack {
			margin: 0 auto;
			padding: 20rpx;
			width: 100vw;
			background: #ffffff;
			display: flex;
			align-items: center;

			>text {
				font-size: 30rpx;
				color: #333333;
			}

			>input {
				width: 611rpx;
				height: 92rpx;
				background: #F8F8F8;
				opacity: 1;
				border-radius: 10rpx;
				background: #F8F8F8;
				opacity: 1;
				padding-left: 20rpx;
				margin-left: 20rpx;
			}

			.address {
				width: 100%;
				display: flex;
				margin-top: 20rpx;
				justify-content: space-between;
				align-items: center;

				view {
					text {
						display: block;
						margin-left: 20rpx;
					}
				}

			}
		}

		.order-mation_address {
			margin: 0 auto;
			padding-right: 20rpx;
			width: 100vw;
			background: #ffffff;
			display: flex;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;

			.dingwei {
				width: 45rpx;
				height: 55rpx;
			}

			>text {
				font-size: 30rpx;
				color: #333333;
			}


			>input {
				width: 611rpx;
				height: 92rpx;
				background: #F8F8F8;
				opacity: 1;
				border-radius: 10rpx;
				background: #F8F8F8;
				opacity: 1;
				padding-left: 20rpx;
				margin-left: 20rpx;
			}

			.address {
				width: 100%;
				display: flex;
				margin-top: 20rpx;
				justify-content: space-between;
				align-items: center;

				.address_left {
					display: flex;
					flex-wrap: wrap;
					align-items: center;

					.address_text {
						text {
							display: block;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
